<template>
  <base-panel-lg class="home-water-ranking" title="用水能耗总览">
    <template #right-btn>
      <base-btn class="more">更多</base-btn>
    </template>
    <div class="chart-water">
      <base-panel-info :sum="3261" unit="m3" :chain="30.62" :year-over="23.42"></base-panel-info>
      <div class="chart-bd">
        <div class="chart-toolbar">
        <span class="chart-title">宿舍用水排行</span>
      </div>
      <v-chart class="chart" :options="ranking" />
      </div>
    </div>
  </base-panel-lg>
</template>

<script>
import BasePanelLg from './BasePanelLg.vue';
import BasePanelInfo from './BasePanelInfo.vue';
import BaseBtn from './BaseBtn.vue';

export default {
  components: {
    BasePanelLg,
    BaseBtn,
    BasePanelInfo,
  },

  data() {
    return {
      ranking: {
        xAxis: {
          type: 'category',
          data: ['302室', '206室', '203室', '407室', '103室', '106室'],
          axisLabel: { color: '#669ef4', fontSize: 11, interval: 0 },
          axisLine: {
            lineStyle: { color: 'rgba(255,255,255,.2)' },
          },
          axisTick: false,
        },
        yAxis: {
          max: 45,
          min: 0,
          interval: 15,
          type: 'value',
          axisLabel: { color: '#fff', fontSize: 11 },
          axisLine: {
            lineStyle: { color: 'rgba(255,255,255,.2)' },
          },
          axisTick: false,
          splitLine: false,
        },
        series: [
          {
            type: 'bar',
            data: [43, 26, 22, 21, 16, 12],
            barWidth: 10,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#58cae7' },
                  { offset: 1, color: '#6186ec' },
                ],
              },
            },
            label: {
              show: true,
              position: 'top',
              color: '#fff',
              fontSize: 11,
            },
          },
        ],
        grid: {
          top: 35,
          bottom: 25,
          left: 50,
          right: 15,
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.home-water-ranking {
  height: 28.444vh;
}

.more{
  color: #46c8cc;
  text-decoration:underline;
  // margin-left: 1vw;
}

.chart-water {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chart-bd {
  flex-grow: 1;
  position: relative;
}

.chart-toolbar {
  height: 3.888vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.25vw 0 .781vw;
  z-index: 10;
}

.chart-title {
  font-size: .885vw;
  margin-left: 1vw;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
